<template>
  <div>
    <!-- 搜索 -->
    <Search/>
    <div class="GoodsBody">
      <!-- 侧边导航 -->
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item
          v-for="item in GoodsName"
          :key="item.ColId"
          :title="item.ColTitle"
        />
      </van-sidebar>
      <div class="GoodsRight">
        <div class="rightImg" v-if="GoodsImg">
              <img
                :src="'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' + GoodsImg"
              />
        </div>
        <div class="GoodsItem" >
            <div class="GoodsItem-Name">{{GoodsName[active].ColTitle}}</div>
            <van-grid :column-num="3">
                <van-grid-item 
                v-for="(item,index) in GoodsName[active].list[0].list" :key="index"
                @click="goToList(item.ColId)"
                text="文字">
                    <van-image :src="'https://chadian-img.oss-cn-shanghai.aliyuncs.com/'+item.PictureSmall" />
                    <div class="item-title">{{item.ColTitle}}</div>
                </van-grid-item>
            </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GoodsList } from "../api/xly-api";
import { ref } from "vue";
import Search from '../components/Search.vue'
export default {
    components: {
        Search,
    },
  setup() {
    const active = ref(0);
    const onChange = (index) => Toast(`标签名 ${index + 1}`);
    return {
      active,
      onChange,
    };
  },
  data() {
    return {
      GoodsName: [
        {
          "ColTitle":"黑茶",
          list:[{
            list:[]
          }]
        }
      ],
      active: 0,
      GoodsImg:'product/57f719e6303042c6a7fb155fa58396a4.jpg',
      res: [],
    };
  },
  created() {
    GoodsList().then((res) => {
    //   console.log(res.data.data.list[4].list[0].ad_list[0].m_adimg);
        console.log(res.data.data.list);
      this.GoodsName = res.data.data.list;
    });
  },
  methods: {
    goToList(id){
      this.$router.push({path:'/detailList',query: {goodsId: id}})
    },
    onChange() {
      let num = this.active;
      if (num == 9 || num == 12){
          this.GoodsImg = null
      }else{
        this.GoodsImg = this.GoodsName[num].list[0].ad_list[0].m_adimg;
      }
    //   console.log("正在切换", num);
    },
  },
};
</script>

<style lang="less" scoped>
.item-title{
  font-size: 0.8rem;
  color: #666;
}
.GoodsBody {
  display: flex;
  height: 100vh;
}
.GoodsRight {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 0;
  position: relative;
  height: 100%;
  padding: 0.21333rem 0.26667rem;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>
<style src='../assets/css/GoodsList.css' scoped></style>
<style lang="less" scoped>
.rightImg{
    height: 94px;
    width: 100%;
}
.rightImg img{
    width: 100%;
    height: 100%;
    border-radius:10px ;
}
.GoodsRight{
    padding: 10px;
    background:#f4f4f4;
}
.van-sidebar{
    width: 100px;
    text-align: center;
    background-color: #fff;
}
.van-sidebar-item{
    padding: 15px 15px;
}
.GoodsItem-Name{
    padding: 10px 0;
    padding-left: 5px;
}
.van-grid{
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.van-grid-item{
    padding: 0px;
}
.item-title{
    position:absolute;
    bottom: 10px;
}
.van-search{
    width: 100%;
}
.van-sidebar-item--select::before{
    background-color: #fff;
}
/* @font-face {
    font-family: 'iconfont';
    src: url('iconfont.woff2?t=1645013449127') format('woff2'),
         url('iconfont.woff?t=1645013449127') format('woff'),
         url('iconfont.ttf?t=1645013449127') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } */
</style>